<template>
	<view>
		<swiper-tab-head :tabBars="tabBars" :tabindex="tabindex" @tabtap="tabtap">
		</swiper-tab-head>
		<view class="uni-tab-bar">
			<swiper class="swiper-box" :style="{height:swiperheight+'px'}" :current="tabindex" @change="tabChange">
				<swiper-item v-for="(items,index) in newslist" :key="index">
					<scroll-view scroll-y class="list" @scrolltolower="loadmore(index)">
						<template v-if="items.list.length>0">
							<!-- 话题列表列表 -->
							<block v-for="(itemes,index3) in items.list" :key="index3" class="animated fadeInLeft faster">
								<view class="topic-list" >
									<image :src="itemes.titlepic" mode="widthFix" lazy-load></image>
									<view class="">
										<view>#{{itemes.title}}#</view>
										<view class="desc">{{itemes.desc}}</view>
										<view> 动态 {{itemes.totalnum}} 今日 {{itemes.todaynum}}</view>
									</view>
								</view>
							</block>
							
							<!-- 上拉加载更多 -->
							<load-more :loadtext="items.loadtext"></load-more>
		
						</template>
						
						<template v-else>
							<!-- 无内容默认 -->
							<nothing></nothing>
							
						</template>
						
								
					</scroll-view>
				</swiper-item>
		
			</swiper>
		</view>
		
	</view>
</template>

<script>
	import swiperTabHead from "../../components/index/swiper-tab-head.vue";
	import nothing from "../../components/common/nothing.vue";
	import loadMore from "../../components/common/load-more.vue";
	
	export default {
		components:{
			swiperTabHead,
			nothing,
			loadMore
			
		},
		
		data() {
			return {
				swiperheight: 700,
				tabindex: 0,
				tabBars: [
					{name: "推荐",id: "tuijian"},
					{name: "游戏",id: "youxi"},
					{name: "打卡",id: "daka"},
					{name: "情感",id: "qinggan"},
					{name: "故事",id: "gushi"},
					{name: "喜爱",id: "xiai"}
				],
				newslist: [
					{
						loadtext:"上拉加载更多",
						list:[
							{
								titlepic:"../../static/demo/topicpic/13.jpeg",
								title:"话题名称",
								desc:"我的是话题描述",
								totalnum:50,
								todaynum:20
							},
							{
								titlepic:"../../static/demo/topicpic/12.jpeg",
								title:"话题名称",
								desc:"我的是话题描述",
								totalnum:50,
								todaynum:20
							},
							{
								titlepic:"../../static/demo/topicpic/11.jpeg",
								title:"话题名称",
								desc:"我的是话题描述",
								totalnum:50,
								todaynum:20
							},
							{
								titlepic:"../../static/demo/topicpic/10.jpeg",
								title:"话题名称",
								desc:"我的是话题描述",
								totalnum:50,
								todaynum:20
							},
							{
								titlepic:"../../static/demo/topicpic/9.jpeg",
								title:"话题名称",
								desc:"我的是话题描述",
								totalnum:50,
								todaynum:20
							}
						]
					},
					{
						loadtext:"上拉加载更多",
						list: []
					},
					{
						loadtext:"上拉加载更多",
						list: []
					},
					{
						loadtext:"上拉加载更多",
						list: []
					},
					{
						loadtext:"上拉加载更多",
						list: []
					},
					{
						loadtext:"上拉加载更多",
						list: []
					}
				
				],

			}
		},
		onLoad() {
			uni.getSystemInfo({
				success: (res) => {
					let height = res.windowHeight - uni.upx2px(100);
					this.swiperheight = height;
				}
			});
		
		},
		methods: {
			// 点击事件：获取到点击tab内容的tabindex值，达到内容的切换
			tabtap(index) {
				this.tabindex = index;
			},
			// 滑动事件：获取到滑动是内容的tabindex值  从而下划线有滑动效果
			tabChange(e) {
				this.tabindex = e.detail.current;
			},
			loadmore(index){
				if (this.newslist[index].loadtext!="上拉加载更多") {
					return;
				} 
				// 修改状态（加载状态）
				this.newslist[index].loadtext="加载中"
				// 获取数据
				setTimeout(()=> {
					// 获取完成状态
					// 一条模拟数据
					let obj={
						titlepic:"../../static/demo/topicpic/6.jpeg",
						title:"今天天气大太阳",
						desc:"大太阳晒着真舒服，身上暖洋洋的！！！",
						totalnum:66,
						todaynum:55
					};
					this.newslist[index].list.push(obj);
					this.newslist[index].loadtext="上拉加载更多";
				}, 1000);
				// this.newslist[index].loadtext="到底了"
			}
		}
	}
</script>

<style>
.topic-list{
	padding: 20upx 0;
	border-bottom: 1upx solid #EEEEEE;
	display: flex;
	justify-content: flex-start;
	margin: 3%;
}
.topic-list image{
	width: 150upx;
	height: 150upx;
	border-radius: 10upx;
	margin-right: 20upx;
}
.topic-list>view>view{
	color: #A4A4A4;
}
.topic-list>view>view:first-child{
	color: #333333;
	font-size: 32upx;
}
.desc{
	text-overflow: ellipsis;
	white-space: nowrap;
	width: 450upx;
	overflow: hidden;
}
</style>
